<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="$route.query.isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">20xx设备校准/检定方案</h2>
      <h4 class="form-header h4">
        设备校准/检定方案
        <el-button type="primary" plain size="mini" @click="handleAdd"
          >增行</el-button
        >
        <el-button type="danger" plain size="mini" @click="handleDele"
          >删行</el-button
        >
      </h4>
      <el-table :data="formData.itemList" :border="true" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column width="200" label="设备名称" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.deviceId`"
              :rules="rules.deviceId"
            >
              <el-select
                filterable
                v-model="scope.row.deviceId"
                placeholder="请选择设备名称"
                clearable
                @change="changeDevice($event, scope.$index)"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in deviceOptions"
                  :key="index"
                  :label="item.deviceName"
                  :value="item.deviceId"
                  :disabled="item.disabled"
                >
                  <span style="float: left">{{ item.deviceName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.deviceCode
                  }}</span></el-option
                >
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          min-width="180"
          label="设备编号"
          prop="deviceCode"
          align="center"
        >
        </el-table-column>

        <el-table-column label="检定/校准方案" align="center">
          <el-table-column width="180" label="测量参数" align="center">
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                :prop="`itemList.${scope.$index}.checkParam`"
                :rules="rules.checkParam"
              >
                <el-input
                  v-model="scope.row.checkParam"
                  placeholder="请输入测量参数"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="180" label="测量范围" align="center">
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                :prop="`itemList.${scope.$index}.checkRange`"
                :rules="rules.checkRange"
              >
                <el-input
                  v-model="scope.row.checkRange"
                  placeholder="测量范围"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            width="250"
            label="测量不确定度/准确度"
            align="center"
          >
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                :prop="`itemList.${scope.$index}.devicePrecision`"
                :rules="rules.devicePrecision"
              >
                <el-input
                  v-model="scope.row.devicePrecision"
                  placeholder="测量不确定度/准确度"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="确认周期"
          prop="price"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.checkPeriod`"
              :rules="rules.checkPeriod"
            >
              <el-input
                v-model="scope.row.checkPeriod"
                placeholder="请输入确认周期"
                clearable
                :style="{ width: '100%' }"
              >
                <template slot="append">个月</template>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column width="180" label="上次校准日期" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.preCheckDate`"
              :rules="rules.preCheckDate"
            >
              <el-date-picker
                v-model="scope.row.preCheckDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择上次校准日期"
                clearable
                @change="changepreTime"
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="180" label="下次校准日期" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.nextCheckDate`"
              :rules="rules.nextCheckDate"
            >
              <el-date-picker
                v-model="scope.row.nextCheckDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择下次校准日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="150" label="备注" align="center">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="`itemList.${scope.$index}.remark`"
              :rules="rules.remark"
            >
              <el-input
                v-model="scope.row.remark"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>

      <el-col :span="24">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!$route.query.isInfo"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { listSelect1 } from "@/api/device/device.js";
import {
  deviceCheckCaseAdd,
  updategdeviceCheckCase,
  deviceCheckCaseInfo,
} from "@/api/device/deviceCheckCase.js";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        itemList: [
          {
            deviceId: undefined,
            devicePrecision: undefined,
            deviceCode: undefined,
            checkPeriod: null,
            checkParam: undefined,
            checkRange: undefined,
            preCheckDate: null,
            nextCheckDate: null,
            remark: undefined,
          },
        ],
      },
      deptOptions: [],
      rules: {
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
        nextCheckDate: [
          {
            required: true,
            message: "请选择下次校准日期",
            trigger: "change",
          },
        ],
        preCheckDate: [
          {
            required: true,
            message: "请选择上次校准日期",
            trigger: "change",
          },
        ],
        devicePrecision: [
          {
            required: true,
            message: "请输入测量不确定度/准确度",
            trigger: "blur",
          },
        ],

        checkParam: [
          {
            required: true,
            message: "请输入测量参数",
            trigger: "blur",
          },
        ],
        checkRange: [
          {
            required: true,
            message: "请输入测量范围",
            trigger: "blur",
          },
        ],
        checkPeriod: [
          {
            required: true,
            message: "请输入周期",
            trigger: "change",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur",
          },
        ],
      },

      deviceOptions: [],
    };
  },
  computed: {},
  created() {
    this.listSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() {},
  methods: {
    changeDep(e, i) {
      console.log(e);
      // console.log(this.$refs["reference" + i].getCheckedNodes()[0].value);
    },
    handleAdd() {
      this.formData.itemList.push({
        deviceId: undefined,
        devicePrecision: undefined,
        deviceCode: undefined,
        checkPeriod: null,
        checkParam: undefined,
        checkRange: undefined,
        preCheckDate: null,
        nextCheckDate: null,
        remark: undefined,
      });
    },
    handleDele() {
      if (this.formData.itemList.length == 1) return;
      this.formData.itemList.pop();
    },
    changeDevice(i, index) {
      let row = this.deviceOptions.find((e) => e.deviceId === i);
      if (row) {
        this.formData.itemList[index].deviceCode = row.deviceCode;
        this.formData.itemList[index].deviceName = row.deviceName;
        this.formData.itemList[index].careUserName = row.managerUserName;
        this.formData.itemList[index].careUserId = row.managerUserId;
        this.formData.itemList[index].content = row.careContent;
        this.formData.itemList[index].preCheckDate = row.initialTime;
        this.formData.itemList[index].nextCheckDate = row.maintenance;
        this.formData.itemList[index].checkPeriod = row.checkPeriod;
      } else {
        this.formData.itemList[index].deviceCode = undefined;
        this.formData.itemList[index].deviceName = undefined;
        this.formData.itemList[index].careUserName = undefined;
        this.formData.itemList[index].careUserId = undefined;
        this.formData.itemList[index].content = undefined;
        this.formData.itemList[index].preCheckDate = undefined;
        this.formData.itemList[index].nextCheckDate = undefined;
        this.formData.itemList[index].checkPeriod = undefined;
      }
    },
    listSelect() {
      listSelect1({ status: 1, busStatus: -1, checkYear: 1 }).then(
        (response) => {
          this.deviceOptions = JSON.parse(JSON.stringify(response.data));
          if (!(this.$route.query.isEdit || this.$route.query.isInfo)) {
            this.formData.itemList = response.data;
            this.formData.itemList.forEach((e, index) => {
              e.careUserName = response.data[index].managerUserName;
              e.careUserId = response.data[index].managerUserId;
              e.content = response.data[index].careContent;
              e.preCheckDate = response.data[index].initialTime;
              e.nextCheckDate = response.data[index].maintenance;
              // initialTime
            });
          }
        }
      );
    },
    getinfo() {
      deviceCheckCaseInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
      });
      console.log(this.checkParam);
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if (this.formData.deviceCheckCaseId != undefined) {
            updategdeviceCheckCase(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            deviceCheckCaseAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }else{
          console.log('././/..//./');
        }
      });
    },
    changepreTime(e){
      console.log(e);
    },
    resetForm() {
      const obj = { path: "./deviceCheckCase" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
//
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-top: 20px !important;
}
</style>
